<template>
  <div id="attendance">
    <div class="PerLeft">
      <div class="Name">**国际机场</div>
      <el-tree
        :data="Menudata"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :highlight-current="true"
      ></el-tree>
    </div>
    <div class="PerRight">
      <div class="operation">
        <div class="buttons">
          <el-button type="primary" @click="ClickAdd">新增</el-button>
        </div>
        <div class="inputs">
          <div style="margin-right:30px;">
            <input type="checkbox" v-model="Checkone" @click="Clickone" /> 全部下级
          </div>
          <div style="margin-right:30px;">
            <input type="checkbox" v-model="Checktwo" @click="Clicktwo" /> 已离职
          </div>
          <div class="check" style="margin-right:10px;position:relative">
            <el-input
              placeholder="请输入搜索关键字"
              maxlength="15"
              style="width:330px;"
              v-model="InputValue"
            ></el-input>
            <i class="iconfont icon-sousuo" @click="ToCheck"></i>
          </div>
          <div>
            <i class="iconfont icon-shuaxin" @click="Toreload"></i>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#F5F5F5'}"
        style="padding-left:20px;padding-right:20px;margin-top:20px;"
        show-overflow-tooltip
      >
        <el-table-column
          v-for="(item,index) in tableTitle"
          :key="index"
          :prop="item.tableprop"
          :label="item.name"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.Type == '考勤机导入'"
              @click="handleClickone(scope.row)"
              type="text"
              size="small"
            >编辑</el-button>
            <el-button
              v-if="scope.row.Type == '人工补录'"
              @click="handleClicktwo(scope.row)"
              type="text"
              size="small"
            >查看</el-button>
            <el-button
              v-if="scope.row.Type == '考勤机导入'"
              @click="handleClickthree(scope.row)"
              type="text"
              size="small"
            >删除</el-button>
            <el-button
              v-if="scope.row.Type == '人工补录'"
              @click="handleClickfour(scope.row)"
              type="text"
              size="small"
            >清除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="Pages">
        <el-pagination
          :hide-on-single-page="true"
          :page-size="pagesize"
          :pager-count="9"
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
        ></el-pagination>
      </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="考勤清单" center :visible.sync="dialog" width="30%">
      <el-form label-width="80px" :model="formone">
        <el-form-item label="工号:">
          <el-input v-model="formone.Order" :disabled="LookType" placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="formone.Name" :disabled="LookType" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="考勤日期:">
          <el-date-picker
            v-model="formone.Day"
            type="date"
            placeholder="选择日期"
            style="width:100%"
            :disabled="LookType"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实际签到:">
          <el-time-picker
            v-model="formone.Signin"
            format="HH:mm"
            :picker-options="{
      selectableRange: '0:00:00 - 23:59:59'
    }"
            placeholder="签到时间"
            :disabled="LookType"
            style="width:100%"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="实际签退:">
          <el-time-picker
            v-model="formone.Signback"
            format="HH:mm"
            :picker-options="{
      selectableRange: '0:00:00 - 23:59:59'
    }"
            placeholder="签退时间"
            :disabled="LookType"
            style="width:100%"
          ></el-time-picker>
        </el-form-item>
         <el-form-item label="结果:" v-if="LookType">
          <el-input v-model="formone.Result" :disabled="LookType"></el-input>
        </el-form-item>
         <el-form-item label="数据来源:" v-if="LookType">
          <el-input v-model="formone.Type" :disabled="LookType"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:right;margin-top:10px;">
        <el-button type="primary" @click="ClickYes">确定</el-button>
        <el-button @click="Canclematerial">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Attendance",
  data() {
    return {
      LookType: false,
      Menudata: [
        {
          Name: "人力资源部",
          Children: [{ Name: "人事部" }, { Name: "行政部" }]
        },
        {
          Name: "设备运维部",
          Children: [
            { Name: "电器维保组" },
            { Name: "机械维保组" },
            { Name: "综合巡检组" }
          ]
        },
        {
          Name: "采购部",
          Children: [{ Name: "设备采购部" }, { Name: "综合采购部" }]
        }
      ],
      defaultProps: {
        children: "Children",
        label: "Name"
      },
      Checkone: true,
      Checktwo: true,
      InputValue: "",
      tableData: [
        {
          States: "在职",
          Order: "111111",
          Name: "张三",
          Date: "2019-01-01",
          Signin: "8:56",
          Signback: "6:10",
          Result: "出勤",
          Type: "考勤机导入"
        },
        {
          States: "在职",
          Order: "222222",
          Name: "李四",
          Date: "2019-01-01",
          Signin: "8:57",
          Signback: "6:11",
          Result: "出勤",
          Type: "考勤机导入"
        },
        {
          States: "在职",
          Order: "333333",
          Name: "王五",
          Date: "2019-01-01",
          Signin: "8:58",
          Signback: "6:12",
          Result: "出勤",
          Type: "考勤机导入"
        },
        {
          States: "在职",
          Order: "444444",
          Name: "谢六",
          Date: "2019-01-01",
          Signin: "8:59",
          Signback: "6:13",
          Result: "出勤",
          Type: "考勤机导入"
        },
        {
          States: "在职",
          Order: "555555",
          Name: "李七",
          Date: "2019-01-01",
          Signin: "9:00",
          Signback: "6:14",
          Result: "出勤",
          Type: "人工补录"
        }
      ],
      tableTitle: [
        { name: "状态", tableprop: "States" },
        { name: "工号", tableprop: "Order" },
        { name: "姓名", tableprop: "Name" },
        { name: "考勤日期", tableprop: "Date" },
        { name: "实际签到", tableprop: "Signin" },
        { name: "实际签退", tableprop: "Signback" },
        { name: "结果", tableprop: "Result" },
        { name: "数据来源", tableprop: "Type" }
      ],
      total: 20,
      pagesize: 10,
      dialog: false,
      formone: {
        Order: "",
        Name: "",
        Day: "",
        Signin: "",
        Signback: "",
        Result:"",
        Type:""
      }
    };
  },
  methods: {
    //点击菜单导航
    handleNodeClick(r) {
      console.log(r);
    },
    //点击新增
    ClickAdd() {
      this.dialog = true;
      this.LookType = false;
      this.formone = {
        Order: "",
        Name: "",
        Day: "",
        Signin: "",
        Signback: ""
      };
    },
    //勾选框
    Clickone() {
      if (this.Checkone) {
        this.Checkone = false;
      } else {
        this.Checkone = true;
      }
    },
    Clicktwo() {
      if (this.Checktwo) {
        this.Checktwo = false;
      } else {
        this.Checktwo = true;
      }
    },
    //点击搜索
    ToCheck() {},
    //刷新
    Toreload() {
      this.$router.go(0);
    },
    //点击编辑
    handleClickone(r) {
      this.dialog = true;
      this.LookType = false;
      //填充数据
    },
    //点击查看
    handleClicktwo(r) {
      this.dialog = true;
      this.LookType = true;
      //填充数据
    },
    //点击删除
    handleClickthree(r) {
      this.$confirm("是否删除此条考勤记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击清除
    handleClickfour(r) {
      this.$confirm("是否清除此条考勤记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //分页
    current_change(currentPage) {
      console.log(currentPage);
    },
    //点击表单确定
    ClickYes() {
      if (this.LookType) {
      } else {
        //数据提交
      }
      this.dialog = false;
    },
    //点击表单取消
    Canclematerial() {
      this.dialog = false;
    }
  },
  mounted() {},
  watch: {}
};
</script>

<style scoped>
#attendance {
  display: flex;
  height: calc(100vh - 51px);
  position: relative;
}
.PerLeft {
  min-width: 180px;
  height: 100%;
  overflow-y: auto;
}
.Name {
  width: 180px;
  height: 45px;
  line-height: 45px;
  font-size: 24px;
  text-align: center;
}
.PerRight {
  width: calc(100% - 288px);
  flex: 1;
}
.operation {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.buttons {
  width: 310px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.buttons > div {
  width: 90px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  background: #108cee;
}
.inputs {
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check > i {
  position: absolute;
  right: 20px;
}
.Pages {
  position: absolute;
  margin-top: 50px;
  right: 200px;
}
</style>